<template>
    <fieldset>
        <legend>tab栏切换</legend>
       <button @click="btn1" :class="{active:cut==='tab2'}">坤坤简介</button>
       <button @click="btn2" :class="{active:cut==='tab3'}">罗志祥简介</button>
        <keep-alive >
            <div :is="cut"></div>
        </keep-alive>

        <button @click="visible=true">点击弹出模态框</button>
        <models @on-on="sure" @on-off="cancle" :visible="visible"></models>
    </fieldset>

</template>
<script>
import tab2 from '../tab2'
import tab3 from '../tab3'
import mix from '../../mixins/mix'
import models from '../model/models.vue'
    export default{
        mixins: [mix],
        data () {
            return {
                cut:'tab2'
            }
        },
        components:{
            tab2,
            tab3,
            models
        },
        methods: {
            btn1(){
                this.cut='tab2'
            },
            btn2(){
                this.cut='tab3'
            }
        }

    }
</script>
<style>
.active{
    background-color: chartreuse;
}

</style>
